import { formatBigNumber } from "@/comm/format";
import i18n from "@/locals";

interface RootObject {
    componentType: string;
    componentSubType: string;
    componentIndex: number;
    seriesType: string;
    seriesIndex: number;
    seriesId: string;
    seriesName: string;
    name: string;
    dataIndex: number;
    data: number;
    value: number;
    color: string;
    dimensionNames: (null | string)[];
    encode: Encode;
    $vars: string[];
    axisDim: string;
    axisIndex: number;
    axisType: string;
    axisId: string;
    axisValue: string;
    axisValueLabel: string;
    marker: string;
}

interface Encode {
    x: number[];
    y: number[];
}

const grid = {
    left: "4%",
    right: "4%",
    bottom: "8%",
};
//公共y轴线配置
const yAxis: any = [
    {
        inverse: false,
        splitArea: { show: false },
        splitLine: {
            show: true,
            lineStyle: {
                color: "#2D3338"
            }
        },
        axisLabel: {
            formatter: function (label: any) {
                return formatBigNumber(label);
            }
        }
    },
    {
        type: "value",
        scale: true,
        // name: '美元',
        // max: 1200,
        // min: 0,
        // boundaryGap: [0.2, 0.2],
        splitLine: {
            show: true,
            lineStyle: {
                color: "#2D3338"
            }
        }
    }
];
const getFormatTime = (t: any, type: number = 1) => {
    if (!t) return "";
    t = +t
    // 将时间戳转换为Date对象
    const date = new Date(t);
    // 获取年份、月份、日期、小时数、分钟数并进行格式化
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    if (type == 1) {
        return `${year}/${month}/${day}`;
    } else {
        return `${year}/${month}/${day} ${hours}:${minutes}`;
    }

}
//x轴线的配置
const xAxis: any = {
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    axisLabel: {
        formatter: function (value: any, index: any) {
            return getFormatTime(value, 1)
        }
    }
};
//tips公共配置
const tooltip: any = {
    trigger: "axis",
    axisPointer: {
        axis: "x",
        type: "line",
        lineStyle: {
            color: "#464C52"
        },
        label: {
            backgroundColor: "#283b56"
        }
    },
    padding: 0,
    // borderColor: "#f33",
    // borderWidth: 4,
    // backgroundColor: "rgba(255,0,0,0.9)",
    formatter: function ($obj: any) {
        let obj = $obj as RootObject[];
        // console.log('formatter 打印！！！',obj)
        return `<div class="" style="background: rgba(45, 50, 55, 0.8); padding: 10px;border-radius: 8px;">
            <h4>${getFormatTime(obj[0]?.name,0)}</h4>
            ${(function () {
                return obj
                    .map((item, idx) => {
                        return `${item?.marker || ""}\t\t${item?.seriesName || ""}: \t\t\t${item?.marker ? formatBigNumber(item?.value) : ""}`;
                    })
                    .join("<br/>");
            })()}
            </div>`;
    }
    // ${obj[0]?.marker || ''}\t\t${obj[0]?.seriesName || ''}\t\t\t${obj[0]?.marker ? obj[0]?.value : ''}<br/>
    // ${obj[2]?.marker || ''}\t\t${obj[2]?.seriesName || ''}\t\t\t${obj[2]?.marker ? obj[2]?.value : ''}<br/>
    // ${obj[4]?.marker || ''}\t\t${obj[4]?.seriesName || ''}\t\t\t${obj[4]?.marker ? obj[4]?.value : ''}<br/>
    // ${obj[5]?.marker || ''}\t\t${obj[5]?.seriesName || ''}\t\t\t${obj[5]?.marker ? obj[5]?.value : ''}<br/>
};

const LinkeCurrency: echarts.EChartOption = {
    // backgroundColor: '#eee',
    legend: {
        // data: ['买', '卖', '净买入', '价格(美元)'],
        data: [i18n.global.t("message.Token.Cheart.a"), i18n.global.t("message.Token.Cheart.b"), i18n.global.t("message.Token.Cheart.c"), i18n.global.t("message.Token.Cheart.d")],
        align: "left",
        right: 0,
        textStyle: {
            color: "white"
        }
    },
    yAxis: yAxis,
    grid: grid,
    tooltip: tooltip,
    xAxis: xAxis,
    series: [
        {
            name: i18n.global.t("message.Token.Cheart.a"),
            type: "bar",
            stack: "one",
            itemStyle: {
                color: "rgba(13, 203, 129,0.5)"
            },
            data: [100, 20, 30, 50, 200, 55, 23]
        },
        {
            name: i18n.global.t("message.Token.Cheart.b"),
            type: "bar",
            stack: "one",
            itemStyle: {
                color: "rgba(246, 71, 93,0.5)"
            },
            data: [-200, -1050, -420, -860, -400, -60, -100]
        },
        {
            name: i18n.global.t("message.Token.Cheart.c"),
            type: "line",
            stack: "twe",
            symbol: "roundRect",
            itemStyle: {
                color: "#0DCB81"
            },
            data: [-200, -1050, -420, -860, -400, -60, -100]
        },
        {
            name: i18n.global.t("message.Token.Cheart.d"),
            type: "line",
            stack: "three",
            symbol: "three",
            xAxisIndex: 0,
            yAxisIndex: 1,
            itemStyle: {
                color: "#4d565f"
            },
            data: [30, 143, 23, 78, 22, 66, 90]
        }
    ]
};

const LinkeCurrency2: echarts.EChartOption = {
    // backgroundColor: '#eee',
    legend: {
        // data: ['充值', '提现', '净流出', '价格(美元)'],
        data: [i18n.global.t("message.Token.CheartB.a"), i18n.global.t("message.Token.CheartB.b"), i18n.global.t("message.Token.CheartB.c"), i18n.global.t("message.Token.CheartB.d")],
        align: "left",
        right: 0,
        textStyle: {
            color: "white"
        }
    },
    yAxis: yAxis,
    grid: grid,
    tooltip: tooltip,
    xAxis: xAxis,
    series: [
        {
            name: i18n.global.t("message.Token.CheartB.a"),
            type: "bar",
            stack: "one",
            itemStyle: {
                color: "rgba(13, 203, 129,0.5)"
            },
            data: [100, 20, 30, 50, 200, 55, 23]
        },
        {
            name: i18n.global.t("message.Token.CheartB.b"),
            type: "bar",
            stack: "one",
            itemStyle: {
                color: "rgba(246, 71, 93,0.5)"
            },
            data: [-200, -1050, -420, -860, -400, -60, -100]
        },
        {
            name: i18n.global.t("message.Token.CheartB.c"),
            type: "line",
            stack: "twe",
            symbol: "roundRect",
            itemStyle: {
                color: "#0DCB81"
            },
            data: [-200, -1050, -420, -860, -400, -60, -100]
        },
        {
            name: i18n.global.t("message.Token.CheartB.d"),
            type: "line",
            stack: "three",
            symbol: "three",
            xAxisIndex: 0,
            yAxisIndex: 1,
            itemStyle: {
                color: "#4d565f"
            },
            data: [30, 143, 23, 78, 22, 66, 90]
        }
    ]
};

export { LinkeCurrency, LinkeCurrency2 };
